<template>
  <div class="content">
      <ul class="flex-box">
        <li><span>支付密码：</span></li>
        <li><input maxlength="6" v-model="pass" ref="passwo" type="password" placeholder="请输入支付密码"></li>
        <li><img class="more-icon" v-if="isShow" @click="empty()" src="~assets/img/icon_de@2x.png" alt=""></li>
      </ul>
      <ul class="flex-box">
        <li><span>确认密码：</span></li>
        <li><input maxlength="6" v-model="pass1" type="password" placeholder="请再次输入支付密码"></li>
        <li><img class="more-icon" v-if="isShow1" @click="empty1()" src="~assets/img/icon_de@2x.png" alt=""></li>
      </ul>
      <div class="tc"><button ref="btn" class="common-btn" @click="next()">完成</button></div>
  </div>
</template>
<script>
import { MessageBox } from 'mint-ui'
export default {
  data () {
    return {
      pass: '',
      isShow: false,
      pass1: '',
      isShow1: false,
      isLogin: false,
      pwd_tokens: '',
      reg: /^\d{6}$/
    }
  },
  mounted () {
    this.$apiPost(`paystatus`, {}
          ).then((data) => {
            this.pwd_tokens = data.data.pwd_token
      })
  },
  methods: {
    next () {
      if (this.isLogin === true) {
        if (this.pass === this.pass1 && this.pass1.length > 0) {
          if (this.reg.test(this.pass) === true ) {
        this.$apiPost(`submitpwd`, {'passwd': this.pass, 'pwd_token':this.pwd_tokens}
            ).then((data) => {
              if (data.status === 0) {
                 MessageBox.alert('支付密码设置成功', '提示').then(() => {
                   this.$router.go(-2)
                })
              } else {
                 MessageBox.alert('请求超时，请重新操作。。', '提示')
              }
            })
          } else {
             MessageBox.alert('请输入6位数的数字密码', '提示')
          }
        }
          else {
            MessageBox.alert('两次密码输入不一致，请重新输入', '提示').then(() => {
              this.pass = ''
              this.pass1 = ''
              this.$refs.passwo.focus()
            })
        }
      }
    },
    empty () {
      this.pass = ''
    },
    empty1 () {
      this.pass1 = ''
    }
  },
  watch: {
    pass (newP, oldP) {
      if (newP.length > 0) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    pass1 (newP, oldP) {
      if (newP.length > 0) {
        this.isShow1 = true
      } else {
        this.isShow1 = false
      }
    }
  },
  updated () {
    if (this.pass.length > 3 && this.pass1.length > 3) {
      this.$refs.btn.style.opacity = '1'
      this.isLogin = true
    } else {
      this.$refs.btn.style.opacity = '0.5'
      this.isLogin = false
    }
  }
}
</script>
<style scoped>
</style>
